<template>
  <div class="amap-page-container">
    <div class="mad">
      <el-amap-search-box
        class="search-box"
        :search-option="searchOption"
        :on-search-result="onSearchResult"
      ></el-amap-search-box>
      <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center"></el-amap>
    </div>
    <div class="toolbar">
      <span v-if="loaded">location: lng = {{ lng }} lat = {{ lat }}</span>
      <span v-else>正在定位</span>
    </div>
    <div style="dispalay:none;" v-on:click="req_post()">查询周边</div>
  </div>
</template>

<script>
export default {
  data() {
    const self = this;
    return {
      searchOption: {
        city: "上海",
        citylimit: false
      },
      center: [111.48892, 28.90474],
      lng: 0,
      lat: 0,
      zoom: 14,
      loaded: false,
      markers: [
        [111.48892, 28.90474],
        [121.40018, 31.197622],
        [121.69991, 31.207649]
      ],
      mapCenter: [111.48892, 28.90474],
      plugin: [
        {
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 20000, //超过10秒后停止定位，默认：无穷大
          maximumAge: 0, //定位结果缓存0毫秒，默认：0
          convert: true, //自动偏移坐标，偏移后的坐标位高德坐标，默认：true
          showButton: true, //显示定位按钮，默认：true
          buttonPositon: "LB", //定位按钮停靠位置，默认：'LB',左下角
          showButton: true, //显示定位按钮，默认：true
          showMarker: true, //定位成功后在定位到true的位置显示点标记，默认：true
          showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
          extensions: "all",
          pName: "Geolocation",
          //  pName:'Scale',
          events: {
            init(o) {
              //o是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                console.log(result);
                if (result && result.position) {
                  self.lng = result.position.lng;
                  self.lat = result.position.lat;
                  self.center = [self.lng, self.lat];
                  self.loaded = true;
                  self.$nextTick();
                }
              });
              // console.log(instance);
            }
          }
        }
      ]
    };
  },
  methods: {
    addMarker() {
      let lng = 121.5 + Math.round(Math.random() * 1000) / 10000;
      let lat = 32.1 + Math.round(Math.random() * 500) / 10000;
      this.markers.push([lng, lat]);
    },
    onSearchResult(pois) {
      let latSum = 0;
      let IngSum = 0;
      if (pois.length > 0) {
        pois.forEach(poi => {
          let { lng, lat } = poi;
          lngSum += lng;
          latSum += lat;
          this.markers.push([poi.lng, poi.lat]);
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        };
        this.mapCenter = [center.lng, center.lat];
      }
    }
  }
};
</script>

<style>
.amap-demo {
  height: 300px;
  margin-top: -42px;
}
.mad {
  width: 100%;
  height: 82vh;
  min-height: 87.7vh;
  max-height: 86vh;
}
.amap-copyright,
.amap-logo img {
  display: none !important;
}
.toolbar {
  display: none;
}
.search-box {
  position: absolute;
  top: 25px;
  left: 20px;
}
.amap-page-container {
  position: relative;
}
</style>
